<script setup>
import { useIndexStore } from "../store";

const store = useIndexStore();
</script>

<template>
  <div>
    <div class="w-[100%] h-[44px] bg-gray-200 overflow-x-auto">
      <el-scrollbar>
        <div class="flex flex-nowrap">
          <template v-for="menu in store.menu_arr" :key="menu.title">
            <div
              :class="menu.active ? 'bg-gray-50 h-full flex items-center justify-start px-2 hover:cursor-pointer flex-shrink-0' : 'h-full flex items-center justify-start px-2 hover:cursor-pointer flex-shrink-0'">
              <img class="w-6" :src="menu.icon" alt="">
              <div @click="store.tabs_toggle(menu)" class="whitespace-nowrap">{{ menu.title }}</div>
              <div @click="store.tabs_remove(menu)" class="h-[44px] pb-[22px] cursor-pointer whitespace-nowrap">{{
                menu.title !== '首页' ? '×' : '' }}</div>
            </div>
          </template>
        </div>
      </el-scrollbar>
    </div>
    <div class="w-full h-svh bg-gray-50 overflow-auto">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>

<style scoped>
.bg-amber-400 {
    --tw-bg-opacity: 1;
    background-color: #F1F1F1;
}
</style>
